<template>
    <!-- 高德地图定位 -->
    <div class="map-positioning">
        <div id="mapPositioningContainer"></div>
    </div>
</template>

<script>
// import AMapLoader from '@amap/amap-jsapi-loader';
import china from "./json/china.json";
// window._AMapSecurityConfig = {
// //   securityJsCode: "c01dc43691da6cbb6bb4871561c4856c",
//   // serviceHost: "http://124.128.27.151:8011/_AMapService"
// }
export default {
    name: "YiMapPositioning",
    data() {
        return {
            AMap: null, // 插件库实例对象
            map: null, // 地图对象
            marker: null, // 标记点组（用于临时存储、删除）
            placeSearch: null, // 检索对象
            autoComplete: null,
            mapSearchName: "", // 地图检索的name
            searchData: [], // 检索数据
            index: 0
        }
    },
    methods: {
        initMap() {
            if (this.AMap) return;
            let mask = [];
            china.forEach((item) => {
                mask.push([item]);
            });
            AMapLoader.load({
                key: "3413b606dc095553cf27518e88e13cb1",
                version: "2.0", // 地图版本
                plugins: [
                    'AMap.Marker', // 标记点
                    'AMap.LngLat', // 坐标
                    // 'AMap.AutoComplete', // 模糊查询
                    // 'AMap.PlaceSearch', // 查询
                    'AMap.Size' // 地物对象的像素尺寸
                ]
            }).then((AMap) => {
                this.AMap = AMap; // 插件
                // 地图初始化
                this.map = new AMap.Map('mapPositioningContainer', {
                    mask,
                    viewMode: "3D", // 是否为3D地图模式
                    zoom: 12, // 初始化地图级别
                    // pitch: 10, // 查看地图俯仰角
                    resizeEnable: true
                });
                // 地图zoom函数
                // this.map.on('zoomchange', this.MapZoomChange);
                // 地图点击标点
                this.map.on('click', this.mapClickHandler);
            })
        },
        MapZoomChange(e) { // 查看zoom功能
            console.log('e.target.getZoom()', e.target.getZoom());
        },
        mapClickHandler(e) { // 地图的click事件
            if (this.marker) this.map.remove(this.marker);
            // 点击后添加 标记点
            this.marker = new this.AMap.Marker({
                position: new AMap.LngLat(e.lnglat.lng, e.lnglat.lat)
            });
            this.map.add(this.marker);
            this.$emit('changeLnglat', {
                lng: e.lnglat.lng,
                lat: e.lnglat.lat
            });
        },
        setMarkerPosition(data, index = 0) { // 添加点的定位
            this.index = index;
            if (this.marker) this.map.remove(this.marker);
            this.marker = new this.AMap.Marker({
                position: new AMap.LngLat(Number(data.lon), Number(data.lat))
            });
            this.map.add(this.marker);
            this.map.setZoomAndCenter(12, new AMap.LngLat(Number(data.lon), Number(data.lat)));
        },
        getMarkerPosition() { // 获取点坐标
            return {
                index: this.index,
                ...this.marker.getPosition()
            }
        },
        mapSearch() { // 地图搜索功能（未使用）
            let auto = new this.AMap.AutoComplete({
                input: 'tipinput'
            })
            let placeSearch = new this.AMap.PlaceSearch({
                map: this.map
            });  //构造地点查询类

            // this.AMap.addListener(auto, "select", select);
            // console.log('auto', auto);
            // console.log('placeSearch', placeSearch);
            // placeSearch.search('山东', (status, result) => {
            //     console.log(status, result)
            // })
            console.log('auto', auto);
            auto.on('select', select);
            function select (e) {
                console.log('e', e);
                placeSearch.setCity(e.poi.adcode);
                placeSearch.search(e.poi.name);  //关键字查询查询
            }
            // auto.on('select', select);
        },
        mapSearchNameInput(val) { // 未使用
            this.placeSearch.search(val, (status, result) => {
                // if (status === 'complete' && result.info === "OK") {
                //     this.searchData = result.poiList.pois || [];
                // }
                console.log(status, result)
            })
            // console.log('val', val);
        }
    },
    mounted() {
        this.$emit('loadCompleted');
    }
}
</script>

<style>
    @import url('./MapPositioning.css');
</style>